<template>
  <div class="main-wrap">
    <main>
      <div class="main-layout">
        <div class="chat-title">
          <div class="ellipsis ct-text">{{ chatTitle }}</div>
        </div>

        <ChatListVue v-if="!showWelcome" />

        <WelcomeConVue v-if="showWelcome" />

        <DialogueBoxVue />
      </div>
    </main>
  </div>
</template>

<script>
import ChatListVue from './ChatList.vue'
import WelcomeConVue from './WelcomeCon.vue'
import DialogueBoxVue from './DialogueBox.vue'

export default {
  name: 'MainCon',

  components: { ChatListVue, WelcomeConVue, DialogueBoxVue },

  computed: {
    showWelcome() {
      const a = this.$store.state.index.chatList
      return !a.length
    },
    
    chatTitle() {
      return this.$store.state.index.chatTitle
    }
  },
}
</script>

<style lang="less">
@import url('./mainCon.less');
</style>
